<!-- 全日制查看授课老师 -->
<template>
    <div class="">
        <div class="container">
            <div class="stu-header">
                <el-form :inline="true" label-position="right" class="demo-form-inline">
                    <el-form-item class="nine-form-title" prop="className" label="班级名称">
                        <span class="mtitle-font mtitle-color">{{searchParam.className || '无'}}</span>
                    </el-form-item>
                </el-form>
            </div>
            <el-table 
                :data="dataLists" class="table" :header-cell-style="{background: '#f1f1f1', color: '#333'}"
                ref="table" empty-text="暂无数据" border  :height="tableHeight" >
                <el-table-column
                    prop="studentId"
                    label="学号"
                    header-align="center"
                    align="center"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="studentName"
                    label="姓名"
                    header-align="center"
                    align="center">
                    <template slot-scope="props">
                        <a href="javaScript:" class="el-button--text" @click="viewStudentInfo(props.row)">{{props.row.studentName}}</a>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="sex"
                    align="center"
                    header-align="center"
                    label="性别">
                </el-table-column>
                <el-table-column
                    prop="chinese"
                    align="center"
                    header-align="center"
                    label="语文">
                </el-table-column>
                <el-table-column
                    prop="math"
                    header-align="center"
                    align="center"
                    label="数学">
                </el-table-column>
                <el-table-column
                    prop="english"
                    align="center"
                    header-align="center"
                    label="英语">
                </el-table-column>
                <el-table-column
                    prop="physics"
                    align="center"
                    header-align="center"
                    label="物理">
                </el-table-column>
                <el-table-column
                    prop="chemistry"
                    align="center"
                    header-align="center"
                    label="化学">
                </el-table-column>
                <el-table-column
                    prop="biology"
                    header-align="center"
                    align="center"
                    label="生物">
                </el-table-column>
                <el-table-column
                    prop="history"
                    header-align="center"
                    align="center"
                    label="历史">
                </el-table-column>
                <el-table-column
                    prop="geography"
                    align="center"
                    header-align="center"
                    label="地理">
                </el-table-column>
                <el-table-column
                    prop="politics"
                    align="center"
                    header-align="center"
                    label="政治">
                </el-table-column>
            </el-table>
        </div>
    </div>
   
</template>
<script>
import { baseUrl } from '@/utils/api'; 
import { toCusInfo } from '@/utils/helper';
export default {
    name: 'viewTeacherList',
    data() {
        return {
            dataLists: [],//班级学生信息
            searchParam: {},//查询条件
            tableHeight: 50
        }
    },
    activated() {
        // isUseCache为false时才重新刷新获取数据
        // 因为对list使用keep-alive来缓存组件，所以默认是会使用缓存数据的         
        if(this.$route.meta.isUseCache == true){
            this.getSessionSearch();
        }
        // 通过这个控制刷新
        this.$route.meta.isUseCache = false;    
    },
    created(){
        this.getSessionSearch();
    },
    beforeRouteLeave (to, from, next) { 
        if (to.name == 'qrzClassView') {
        // 根据是否删除操作，进行判断是否需要使用缓存数据
        to.meta.isUseCache = this.isDel; 
        this.isDel=false;
        } else {
            to.meta.isUseCache = false; 
        }
        next();  
    },   
    mounted() {
        let self = this; 
        this.$nextTick(function () {                 
            this.tableHeight = window.innerHeight -  self.$refs.table.$el.offsetTop - 50;                 
            // 监听窗口大小变化               
            window.onresize = function() {                     
                self.tableHeight = window.innerHeight -  self.$refs.table.$el.offsetTop - 50                 
            }             
        })             
        //this.$refs.table.$el.offsetTop：表格距离浏览器的高度     　　
        //50表示你想要调整的表格距离底部的高度（可以随意调整），因为我们一般 都有放分页组件的，所以需要给它留一个高度　 
    },
    methods: {
        getSessionSearch(){
            if(JSON.stringify(this.$route.params)!='{}'){
                this.searchParam = this.$route.params;
            }else{
                let search = JSON.parse(window.sessionStorage.getItem("vuex"))
                if(JSON.stringify(search.viewTeacherList.routeParams)!='{}'){
                    this.dataLists = [];
                    this.searchParam = search.viewTeacherList.routeParams;                      
                }
            }
            this.getTableData();
        },
        /**
         * 获取列表页数据
         */
        getTableData(){
            let param = new URLSearchParams();
            param.append("classId", this.searchParam.classId||'');
            this.$axios.post(baseUrl + '/ft/classmanage/getClassStudentTeacherList.do', param)
                .then(res =>{
                    if(res.data.code == 0){
                        this.dataLists = res.data.data;
                    }
                }, err =>{
                    this.$message.error(err);
                }
            )
        },
        /**
         * 查看老师信息
         */
        viewStudentInfo(item){
            if(item.customerId){
                toCusInfo(item.customerId);
            }
        }
    },
    destroyed(){

    }
}
</script>
<style scoped>
   .stu-header{
        min-width: 900px;
    }
    .demo-form-inline{
        display: flex;
        flex-direction: row;
    }
    .demo-form-inline .el-form-item{
        flex: 1;
        text-align: left;
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
</style>


